<template>
  <div>

    <div id="components-grid-demo-playground">
      <!--      :gutter="[20, 100]"-->
      <!--   The first parameter represents the gaps in each column   -->
      <!--    第一个参数表示每一列之间的距离-->
      <!--  The second parameter indicates the distance between each row    -->
      <!--      第二个参数表示每一行之间的距离-->
      <a-row v-for="(x,index) in photoINfo" :gutter="[20, 50]" :key="index">
        <a-col v-for="(item) in x" :key="item.id" :span="spanSize">
          <div class="div_center" style="height: 200px;line-height: 20px;cursor:pointer" @click="GoUrl(item)">
            <img :src="item.iconBase64" width="85px" height="85px" style="margin-top:  10%;object-fit: contain;"/>
            <div style="height: 30px !important;line-height: 30px !important;">
              <a href="javascript:;">{{ item.appName }}</a>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import HttpWorkPlace from "../../../api/workPlace";

export default {
  // 每一行的栅格数量 为 24
  data() {
    return {
      photoINfo: [],
      rowColSize: 4,
      spanSize: 6 // 一个 col 所占的栅格数量
    };
  },
  computed: {},
  mounted() {
    this.loadInitData()
  },
  methods: {
    GoUrl(item) {
      if (item.protocol === 'Basic' || item.inducer === 'SP') {
        window.open(item.loginUrl)
        return;
      }
      window.open(process.env.VUE_APP_API_BASE_URL + "/sign/authz/" + item.id);
    },

    loadInitData() {
      HttpWorkPlace.getAppList().then((res) => {
        var list = [];
        list = res.data.data
        var twoArray = []; // 要遍历的二维数组
        var minArray = [];  // 存储 每一行的数据

        for (let i = 0; i < list.length; i++) {
          minArray.push(list[i])
          if (minArray.length === this.rowColSize) {
            twoArray[twoArray.length] = minArray;
            minArray = [];
            continue;
          }
          // 取出结尾的数据
          if (list.length % this.rowColSize !== 0 && list.length - 1 === i) {
            twoArray[twoArray.length] = minArray;
          }
        }
        this.photoINfo = twoArray;
      })

    }
  }
}
</script>
<style scoped>
#components-grid-demo-playground [class~="ant-col"] {
  background: transparent;
  border: 0;
}

#components-grid-demo-playground [class~="ant-col"] > div {
  background: white;
  height: 180px;
  line-height: 180px;
  font-size: 13px;
}

#components-grid-demo-playground pre {
  background: #f9f9f9;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 16px;
}

.div_center {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}
</style>
